<!-- subpkg_archive/form/index.vue -->
<script setup>
import { ref } from 'vue'
import { addPatientAPI,getPaientDetailAPI,updatePatientAPI } from '@/apis/user.js'
import { onLoad } from '@dcloudio/uni-app'

const props = defineProps({
	id:String
})
console.log(props.id)
const isDefault = ref([0])
const formData = ref({
	name:'',
	idCard:'',
	gender: 1,
	defaultFlag: 1
})

const form = ref(null)
//控制是否为默认选中
const onSwitchChange = (e) => {
	// console.log(e)
	 formData.value.defaultFlag = e.detail.value ? 1 : 0
}

// 表单验证规则
const rules = {
  name: {
    rules: [
      { required: true, errorMessage: '请填写患者姓名' },
      {
        pattern: '^[\u4e00-\u9fa5]{2,5}$',
        errorMessage: '患者姓名为2-5位中文'
      }
    ]
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请输入身份证号' },
      {
        pattern:
          '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
        errorMessage: '身份证号格式不正确'
      }
    ]
  },
  gender: {
    rules: [
		{ required: true, errorMessage: '请勾选患者性别' },
		{
			validateFunction(rule,value,data,callback) {
				const num = data.idCard.slice(-2,-1) % 2 // 得到0|1
				if (num !== value) {
					callback('选择的性别和身份证上面的性别不符合')
				}
				return true
			}
		}
	]
  }
}

//获取患者详情
const getPaientDetail = async() => {
	//有id就是编辑患者
	if(props.id){
		uni.showLoading({
			title:'正在加载中...'
		})
		uni.setNavigationBarTitle({
				title:'编辑患者'
			})
			const res = await getPaientDetailAPI(props.id)
			const { id, gender, idCard, name, defaultFlag } = res.data
			//渲染患者详情信息
			formData.value = { id, gender, idCard, name, defaultFlag }
			uni.hideLoading()
		}
	}

onLoad(()=>{
	getPaientDetail()
})
//提交表单
const onSubmit = async() => {
	try{
		await form.value.validate()
		props.id ? await updatePatientAPI(formData.value) : await addPatientAPI(formData.value)
		uni.showToast({
			title:props.id ? '编辑成功' : '添加成功',
			icon:'success'
		})
		uni.navigateTo({
			url:'/subpkg_archive/list/index'
		})
	}
	catch(error){
		console.log(error)
	}
}


</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms border label-width="220rpx" ref="form" :model="formData" :rules="rules">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
			v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
			v-model="formData.idCard"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
			v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 }
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch checked color="#20c6b2" style="transform: scale(0.7)" :checked="formData.defaultFlag === 1"  @change="onSwitchChange"/>
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>